* { 
	padding: 0; 

	margin: 0; 
} 
body { 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	height: 100vh; 
	background-color: #000; 
	perspective: 900px; 
} 
section { 
	position: relative; 
	width: 300px; 
	height: 200px; 
	cursor: pointer; 
	transform-style: preserve-3d; 
	animation: rotate 20s linear infinite; 
} 
section:hover { 
	animation-play-state: paused; 
} 
section div { 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	text-align: center; 
	-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3)); 
} 
section div:nth-child(1) { 
	transform: translateZ(300px); 
	background-color: #c14c39; 
} 
section div:nth-child(2) { 
	transform: rotateY(60deg) translateZ(300px); 
	background-color: #6e9c72; 
} 
section div:nth-child(3) { 
	transform: rotateY(120deg) translateZ(300px); 
	background-color: #5e5f7a; 
} 
section div:nth-child(4) { 
	transform: rotateY(180deg) translateZ(300px); 
	background-color: #f5eb98; 
} 
section div:nth-child(5) { 
	transform: rotateY(240deg) translateZ(300px); 
	background-color: #50a3bc; 
} 
section div:nth-child(6) { 
	transform: rotateY(300deg) translateZ(300px); 
	background-color: #f9a99a; 
} 
@keyframes rotate { 
	0% { 
		transform: rotateY(0); 
	} 
	100% { 
		transform: rotateY(360deg); 
	} 
}